<template>
  <div>
    <el-tabs class="content-tabs" v-model="type" @tab-click="changeType">
      <el-tab-pane label="所有小程序" name="first"></el-tab-pane>
      <el-tab-pane label="试用中" name="second"></el-tab-pane>
      <el-tab-pane label="运营中" name="third"></el-tab-pane>
      <el-tab-pane label="7天内将欠费" name="fourth"></el-tab-pane>
      <el-tab-pane label="已欠费" name="fifth"></el-tab-pane>
    </el-tabs>
    <div style="margin: 5px 0 15px;">
      <el-input
        style="width: 40%;"
        placeholder="小程序名称"
        v-model="srhkeyword"
        class="input-with-select"
      >
        <el-button slot="append" @click="getAppList" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="danger" @click="appUpdate()" :disabled="multipleSelection.length <= 0">批量升级</el-button>
    </div>
    <div>
      <el-table
        :data="appList"
        stripe
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="dataListLoading"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="appid" header-align="center" align="center" label="APPID"></el-table-column>
        <el-table-column prop="name" header-align="center" align="center" label="小程序"></el-table-column>
        <el-table-column prop="status.desc" header-align="center" align="center" label="授权状态"></el-table-column>
        <el-table-column prop="productName" header-align="center" align="center" label="应用"></el-table-column>
        <el-table-column prop="addMoney" header-align="center" align="center" label="累计消费"></el-table-column>
        <el-table-column prop="expirationTime" header-align="center" align="center" label="有效期"></el-table-column>
        <!-- <el-table-column prop="edition" header-align="center" align="center" label="版本"></el-table-column> -->
        <el-table-column prop="priceType" header-align="center" align="center" label="购买产品"></el-table-column>
        <el-table-column prop="remindDay" header-align="center" align="center" label="剩余天数"></el-table-column>
        <el-table-column
          prop="newVersion"
          header-align="center"
          align="center"
          width="80"
          label="版本升级"
        >
          <template slot-scope="scope">
            <el-button
              class="mar4"
              size="mini"
              type="danger"
              v-if="scope.row.newVersion == '0'"
              @click="appUpdate(scope.row.id, scope.row.name)"
            >升级</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="mar4" size="mini" type="primary" @click="appRenew(scope.row.id)">续费</el-button>
            <el-button class="mar4" size="mini" type="primary" @click="appDetail(scope.row.id)">详情设置</el-button>
            <!-- <el-button
                size="mini"
                type="primary"
                @click="appUpdateRecord(scope.row.id)">升级记录</el-button>
              <el-button
                size="mini"
                type="primary"
            @click="appRenewRecord(scope.row.id)">续费记录</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 设置详情 -->
    <setting v-if="settingVisible" ref="settingDia"></setting>
    <update v-if="updateVisible" ref="updateDia"></update>
    <renew v-if="renewVisible" ref="renewDia" @refreshDataList="getAppList"></renew>
    <update-record v-if="updateRecordVisible" ref="updateReDia"></update-record>
    <renew-record v-if="renewRecordVisible" ref="renewReDia"></renew-record>
  </div>
</template>

<script>
import API from "@/api";
import Setting from "./setting";
import Renew from "./renew";
import UpdateRecord from "./update-record";
import RenewRecord from "./renew-record";
import { formatDate } from "@/utils/index";

export default {
  data() {
    return {
      srhkeyword: "",
      currentPage: 1,
      currentSize: 20,
      total: 0,
      type: "first",
      appList: [],
      multipleSelection: [],
      settingVisible: false,
      updateVisible: false,
      renewVisible: false,
      updateRecordVisible: false,
      renewRecordVisible: false,
      dataListLoading: false,
      // 支付状态: TESTING PAYED
      payStatus: "",
      //到期时间
      beginLimitTime: "",
      endLimitTime: "",
      //续费版本
      edition_radio: "上海"
    };
  },
  created() {
    this.getAppList();
  },
  components: {
    Setting,
    Renew,
    UpdateRecord,
    RenewRecord
  },
  methods: {
    changeType() {
      this.srhkeyword = "";
      this.getAppList();
    },
    getAppList() {
      this.dataListLoading = true;
      switch (this.type) {
        case "first":
          this.payStatus = "";
          this.endLimitTime = "";
          this.beginLimitTime = "";
          break;
        case "second":
          this.payStatus = "TESTING";
          this.endLimitTime = "";
          this.beginLimitTime = "";
          break;
        case "third":
          this.payStatus = "PAYED";
          this.endLimitTime = "";
          this.beginLimitTime = "";
          break;
        case "fourth":
          this.payStatus = "";
          this.endLimitTime = "";
          this.beginLimitTime = "";
          var today = new Date();
          // 获取今天
          var limitDayMin = formatDate(today, "yyyy-MM-dd hh:mm:ss");
          // 获取七天后 --开始
          var sevenday = today.getTime() + 1000 * 3600 * 24 * 7;
          var sevendayDate = new Date(sevenday);
          var limitDayMax = formatDate(sevendayDate, "yyyy-MM-dd hh:mm:ss");
          // 获取七天后 --结束
          // 到期时间 大于今天，小于等于七天后
          this.beginLimitTime = limitDayMin;
          this.endLimitTime = limitDayMax;
          break;
        case "fifth":
          this.payStatus = "";
          this.endLimitTime = "";
          this.beginLimitTime = "";
          // 获取已欠费 --开始
          var today = new Date();
          var limitDay = formatDate(today, "yyyy-MM-dd hh:mm:ss");
          // 获取已欠费 --结束
          // 到期时间
          this.endLimitTime = limitDay;
          break;
        default:
      }
      var params = {
        't.name_like': this.srhkeyword,
        pageIndex: this.currentPage,
        pageSize: this.currentSize,
        payStatus_eq: this.payStatus,
        expirationTime_le: this.endLimitTime,
        expirationTime_gt: this.beginLimitTime
      };
      API.miniuserproduct.list(params).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.appList = data.page.content || [];
          this.total = data.page.totalSize || 0;
        }
        this.dataListLoading = false;
      });
    },
    handleSelectionChange(val) {
      // 多选功能
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      // 每页显示条数
      console.log(`每页 ${val} 条`);
      this.currentSize = val;
      this.getAppList();
    },
    handleCurrentChange(val) {
      // 当前页数选择
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAppList();
    },
    appDetail(id) {
      // 详情设置
      this.settingVisible = true;
      this.$nextTick(() => {
        this.$refs.settingDia.init(id);
      });
    },
    // 升级
    appUpdate(id, name) {
      var appIds = id
        ? [id]
        : this.multipleSelection.map(item => {
            return item.id;
          });
      var names = name
        ? [name]
        : this.multipleSelection.map(item => {
            return item.name;
          });
      this.$confirm(
        `确定对[小程序=${names.join(",")}]进行[${
          names ? "升级" : "批量升级"
        }]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("miniapp/miniuserproduct/upgrade"),
            method: "post",
            data: this.$http.adornData(appIds, false)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getAppList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    appRenew(id) {
      // 续费
      this.renewVisible = true;
      this.$nextTick(() => {
        this.$refs.renewDia.init(id);
      });
    },
    appUpdateRecord(id) {
      // 升级记录
      this.updateRecordVisible = true;
      this.$nextTick(() => {
        this.$refs.updateReDia.init(id);
      });
    },
    appRenewRecord(id) {
      // 续费记录
      this.renewRecordVisible = true;
      this.$nextTick(() => {
        this.$refs.renewReDia.init(id);
      });
    }
  }
};
</script>
<style>
.mar4 {
  margin: 4px 2px !important;
}
</style>
